<template>
    <div>
        <div style="width: 100%;height: 820px;overflow:hidden;cursor: move;position: relative" id="imgContent">
            <div @mousedown="mousedown($event)" @mouseup='mouseup($event)' style="position: absolute;top:0;left: 0;z-index: 1;">
                <img src="../../../assets/img/ShaanxiShiDa.jpg" alt="" id="moveImg">
                <!--<div class="equip-posi" :style="'background-image:url('+require('../../../assets/img/DeviceImages/electric_error.png')+');top: 400px;left: 860px;'" @click="openEquipment">-->
                    <!--<div class="equip-posi-text" v-if="isShowText"><span>中心空调电表</span></div>-->
                <!--</div>-->
                <!--<div class="equip-posi" :style="'background-image:url('+require('../../../assets/img/DeviceImages/electric_warning.png')+');top: 400px;left: 1250px;'" @click="openEquipment">-->
                    <!--<div class="equip-posi-text" v-if="isShowText"><span>中心阀门</span></div>-->
                <!--</div>-->
                <!--<div class="equip-posi" :style="'background-image:url('+require('../../../assets/img/DeviceImages/electric_on.gif')+');top: 700px;left: 1230px;'" @click="openEquipment">-->
                    <!--<div class="equip-posi-text" v-if="isShowText"><span>中心空调温度表</span></div>-->
                <!--</div>-->
                <div class="equip-posi" v-for="(item,index) in pointToushi" :key="index" :style="item.stylestr" @click="openEquipment($event,item.id,item.pid)">
                    <div class="equip-posi-text" v-if="isShowText"><span>{{item.elementName}}</span></div>
                </div>
            </div>
            <div class="look-equipmet">
                <div @click="lookEquipMent(1)">查看设备信息</div>
                <!--<div @click="lookEquipMent(2)" style="margin-top: 10px;">设备定位</div>-->
            </div>
        </div>
        <div>
            <!--<v-perschild></v-perschild>-->
        </div>
        <div>
            <el-dialog
                    title="设备"
                    :visible.sync="equimentVisible"
                    width="50%">
                <div>
                    <v-mapchild :parenData1="parentData"></v-mapchild>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="equimentVisible = false">关 闭</el-button>
                    <el-button type="primary" @click="equimentVisible = false">刷 新</el-button>
                  </span>
            </el-dialog>
        </div>
        <div>
            <el-dialog
                    title="选择设备"
                    :visible.sync="dialogVisible"
                    width="80%">
                <div>
                    <v-gmapchild></v-gmapchild>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
            </el-dialog>
        </div>
    </div>

</template>

<script>
    import vGmapchild from './gisMapChild.vue';
    import vMapchild from './mapEquimentChild.vue';
    import vPerschild from './perspectiveMapChild.vue';
    import {getListAddedGis,getDeviceDetailInfo} from  '../../../api/index';

    export default {
        name: "perspectiveMap",
        components:{
            vGmapchild,vMapchild,vPerschild
        },
        data(){
            return {
                equimentVisible:false,
                isShowText:false,
                dialogVisible:false,
                addedDataListOrgin:"",
                pointToushi:[],
                parentData:'',
                selectDevice:'',
                selectDevicePid:'',
            }
        },
        created(){
            this.getListAddedGis();
        },
        methods:{
            getDeviceDetailInfo(){
                getDeviceDetailInfo({
                    id:this.selectDevice,
                    pid:this.selectDevicePid,
                }).then((res)=>{
                    console.log(res)
                    this.parentData = res;
                    this.parentData['deviceId'] = this.selectDevice;
                })
            },
            //获取已添加的标注点的数据列表
            getListAddedGis(){
                getListAddedGis({
                    gisType:'2'
                }).then((res) =>{
                    this.addedDataListOrgin = res.d;
                    this.addPointToushi();
                })
            },
            mousedown: function (event) {
                var event=event||window.event;
                var _target = event.currentTarget;

                var startx=event.clientX;
                var starty=event.clientY;
                var sb_bkx=startx-_target.offsetLeft;
                var sb_bky=starty-_target.offsetTop;
                if (event.preventDefault) {
                    event.preventDefault();
                } else{
                    event.returnValue=false;
                };
                document.onmousemove=function (ev) {
                    var event=ev||window.event;
                    var endx=event.clientX-sb_bkx;
                    var endy=event.clientY-sb_bky;
                    var cH = document.getElementById('imgContent').offsetHeight;
                    var cW = document.getElementById('imgContent').offsetWidth;
                    if(endx>-1||endy>-1|| (endy < cH - _target.offsetHeight)|| ( endx < cW - _target.offsetWidth)){
                        return ;
                    }
                    _target.style.left=endx+'px';
                    _target.style.top=endy+'px';
                }
            },
            mouseup: function (e) {
                document.onmousemove=null;
            },
            openEquipment(e,_id,_pid){
                this.selectDevice = _id;
                this.selectDevicePid = _pid;
                this.getDeviceDetailInfo();
                this.equimentVisible = true;

            },
            lookEquipMent(ty){
                if(ty==1){
                    this.isShowText = !this.isShowText;
                }else{
                    this. dialogVisible = true
                }

            },
            //添加透视地图上的点
            addPointToushi(){
                var pointArray = this.addedDataListOrgin;
                console.log(pointArray)
                var demoList = [];
                for (var i = 0; i < pointArray.length; i++) {
                    if(pointArray[i].pointX && pointArray[i].pointY){
                        console.log(pointArray[i])
                        demoList.push(this.formatStyle(pointArray[i]))
                    }
                }
                console.log(demoList)
                this.pointToushi = demoList;

            },
            //格式化透视地图需要添加的坐标点的style样式 obj
            formatStyle(str){
                str['stylestr'] = 'background-image:url('+require('../../../assets/img/DeviceImages/'+str.imageUrl)+');top: '+str.pointY+'px;left: '+str.pointX+'px;';
                return str ;
            },
        }
    }
</script>

<style scoped>
    .equip-posi{
        width: 50px;
        height: 50px;
        position: absolute;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .equip-posi-text{
        margin-top: 50px; width: 150px;
    }
    .equip-posi-text span{
        background: #000;color: #fff;
    }
    .look-equipmet{
        position: absolute;
        top: 20px;
        left: 50px;
        color: #fff;
        z-index: 5;
        font-size: 14px;
        cursor: pointer;
    }
</style>